<template>
    <div class="p-grid p-fluid">

        <div class="p-col-12 p-lg-6">
            <!--面包屑-->
            <div style="padding-bottom: 0.95rem;">
                <Breadcrumb :home="home" :model="crumbs"/>
            </div>

            <div class="card">
                <h4>渠道分析</h4>
                <p>对你的分销渠道进行图表，更直观的了解渠道推广效果。</p>

            </div>
            <div class="card">
                <h5 class="centerText">线性图</h5>
                <Chart type="line" :data="lineData" />
            </div>

            <div class="card">
                <h5 class="centerText">饼形图</h5>
                <Chart type="pie" :data="pieData" />
            </div>

            <div class="card">
                <h5 class="centerText">极地面积图</h5>
                <Chart type="polarArea" :data="polarData" />
            </div>
        </div>
        <div class="p-col-12 p-lg-6">
            <div class="card">
                <h5 class="centerText">条形图</h5>
                <Chart type="bar" :data="barData" />
            </div>

            <div class="card">
                <h5 class="centerText">环形图</h5>
                <Chart type="doughnut" :data="doughnutData" />
            </div>

            <div class="card">
                <h5 class="centerText">雷达图</h5>
                <Chart type="radar" :data="radarData" />
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                home: {label: '控制台', icon: 'pi pi-home', to: '/'}, //面包屑公共导航
                crumbs: [ //面包屑
                ],
                lineData: {
                    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                    datasets: [
                        {
                            label: 'First Dataset',
                            data: [65, 59, 80, 81, 56, 55, 40],
                            fill: false,
                            borderColor: '#03A9F4'
                        },
                        {
                            label: 'Second Dataset',
                            data: [28, 48, 40, 19, 86, 27, 90],
                            fill: false,
                            borderColor: '#FFC107'
                        }
                    ]
                },
                pieData: {
                    labels: ['A','B','C'],
                    datasets: [
                        {
                            data: [300, 50, 100],
                            backgroundColor: [
                                "#FFC107",
                                "#03A9F4",
                                "#4CAF50"
                            ],
                            hoverBackgroundColor: [
                                "#FFE082",
                                "#81D4FA",
                                "#A5D6A7"
                            ]
                        }]
                },
                polarData: {
                    datasets: [{
                        data: [
                            11,
                            16,
                            7,
                            3,
                            14
                        ],
                        backgroundColor: [
                            "#FFC107",
                            "#03A9F4",
                            "#4CAF50",
                            "#E91E63",
                            "#9C27B0"
                        ],
                        label: 'My dataset'
                    }],
                    labels: [
                        "Yellow",
                        "Blue",
                        "Green",
                        "Pink",
                        "Purple"
                    ]
                },
                barData: {
                    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                    datasets: [
                        {
                            label: 'My First dataset',
                            backgroundColor: '#03A9F4',
                            borderColor: '#03A9F4',
                            data: [65, 59, 80, 81, 56, 55, 40]
                        },
                        {
                            label: 'My Second dataset',
                            backgroundColor: '#FFC107',
                            borderColor: '#FFC107',
                            data: [28, 48, 40, 19, 86, 27, 90]
                        }
                    ]
                },
                doughnutData: {
                    labels: ['A','B','C'],
                    datasets: [
                        {
                            data: [300, 50, 100],
                            backgroundColor: [
                                "#FFC107",
                                "#03A9F4",
                                "#4CAF50"
                            ],
                            hoverBackgroundColor: [
                                "#FFE082",
                                "#81D4FA",
                                "#A5D6A7"
                            ]
                        }]
                },
                radarData: {
                    labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
                    datasets: [
                        {
                            label: 'My First dataset',
                            backgroundColor: 'rgba(179,181,198,0.2)',
                            borderColor: 'rgba(179,181,198,1)',
                            pointBackgroundColor: 'rgba(179,181,198,1)',
                            pointBorderColor: '#fff',
                            pointHoverBackgroundColor: '#fff',
                            pointHoverBorderColor: 'rgba(179,181,198,1)',
                            data: [65, 59, 90, 81, 56, 55, 40]
                        },
                        {
                            label: 'My Second dataset',
                            backgroundColor: 'rgba(255,99,132,0.2)',
                            borderColor: 'rgba(255,99,132,1)',
                            pointBackgroundColor: 'rgba(255,99,132,1)',
                            pointBorderColor: '#fff',
                            pointHoverBackgroundColor: '#fff',
                            pointHoverBorderColor: 'rgba(255,99,132,1)',
                            data: [28, 48, 40, 19, 96, 27, 100]
                        }
                    ]
                }
            }
        },
        created() {
            //获取当前路由名称
            for (let i = 0; i < this.$router.options.routes[1].children.length ; i++){
                if(this.$router.options.routes[1].children[i].path === this.$route.fullPath){
                    this.crumbs = [
                        {label: '渠道管理', },
                        {label: this.$router.options.routes[1].children[i].meta.title},
                    ];
                }
            }
        }
    }
</script>

<style scoped>

</style>
